<template>
  <div class="newslists">
    <van-pull-refresh
      @refresh="onRefresh"
      v-model="isLoading"
    >
      <van-card
        v-for="item in newsList"
        :key="item.id"
        :title="item.title"
        :thumb="item.img_url"
        :centered="true"
        @click="newsDetail(item.id)"
      >
        <div slot="num">点击 : {{item.click}}</div>
        <div slot="price">发表时间 : {{$dayjs(item.add_time).format('YYYY-MM-DD')}}</div>
      </van-card>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: 'newlist',
  data () {
    return {
      newsList: [],
      isLoading: true
    }
  },
  created () {
    this.getNewsList()
  },
  methods: {
    async getNewsList () {
      const { data: res } = await this.$http.get(`/api/getnewslist`)
      console.log(res)
      if (res.status !== 0) return this.Notify({ type: 'danger', message: '获取新闻列表数据失败' })
      this.newsList = res.message
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.getNewsList()
      }, 500)
    },
    newsDetail (id) {
      console.log(id)
      this.$router.push(`detail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ img {
  object-fit: cover !important;
}
.newslists {
  text-align: left;
  margin-bottom: 50px;
  background-color: #fff;
}
.van-card {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  box-sizing: content-box;
  margin: 0 10px;
  background-color: #fff;
}
.van-card .van-card__content {
  min-height: 0;
}
.van-card__thumb {
  width: 42px;
  height: 42px;
}
.van-card__title {
  height: 17px;
  font-size: 14px !important;
  font-weight: 700;
  color: #000;
  max-height: 32px;
  line-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.van-card__bottom,
.van-card .van-card__price {
  color: #226aff;
  line-height: 30px;
}
</style>
